<template>
<div>
  <van-collapse v-model="activeNames">
    <van-collapse-item title="工单内容" name="工单内容">
      <div slot="icon" class="flex flex-column flex-center">
        <van-icon><img class="icon" src="@/assets/img/icon_xmlr.png" alt=""></van-icon>
      </div>
      <my-cell v-for="(item,index) in doneContenList" :key="'content'+index">
        <p slot="title">{{ item.title }}</p>
        <p slot="des">{{ item.des }}</p>
      </my-cell>
    </van-collapse-item>
    <van-collapse-item title="问题反馈" name="问题反馈">
      <div slot="icon" class="flex flex-column flex-center">
        <van-icon><img class="icon" src="@/assets/img/icon_xmlr.png" alt=""></van-icon>
      </div>
      <div class="problem" v-for="(item,index) in doneProblemList" :key="'doneProblemList'+index">
        <my-cell>
          <div slot="title">立项名称</div>
          <div slot="des">{{item.title}}</div>
        </my-cell>
        <my-cell>
          <div slot="title">项目摘要</div>
          <div slot="des" @click="checkMore(item)">点击查看更多 ></div>
        </my-cell>
        <p>{{item.des}}</p>
      </div>
    </van-collapse-item>
    <van-collapse-item title="审批历史记录" name="审批历史记录">
      <div slot="icon" class="flex flex-column flex-center">
        <van-icon><img class="icon" src="@/assets/img/icon_spls.png" alt=""></van-icon>
      </div>
      <single-history-item :list="todoListHistoryList"></single-history-item>
    </van-collapse-item>
  </van-collapse>
</div>
</template>

<script>
import {todoListHistoryList} from "@/data/todoList";
import {doneContenList,doneProblemList} from "@/data/doneList";
import Vue from 'vue';
import {Collapse, CollapseItem, Icon} from 'vant';
import SingleHistoryItem from "@/views/toDoList/singleHistoryItem";
import MyCell from "@/components/myCell";

Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Icon);
export default {
name: "mainBody",
  components: {MyCell, SingleHistoryItem},
  data() {
    return {
      activeNames: ['问题反馈'],
      doneContenList,
      doneProblemList,
      todoListHistoryList,
      problemAnswer:"",
      dealAdvice:"",
      isAgree:["同意","不同意"],
      isAgreeIndex:0,
      spShow:false,
    };
  },
  methods:{
    onAgreeClick(index){
      this.isAgreeIndex=index;
    },
    onSpListClick(item){
      this.spContent=item;
      this.spShow=false;
    },
    checkMore(item){
      console.log("查看更多关于["+item.title+"]")
    }
  }
}
</script>

<style lang="less" scoped>
.icon {
  width: .6rem;
  height: .6rem;
  margin: 0 .2rem 0 0;
}
.textNum{
  margin: .1rem .1rem 0 0;
  text-align: right;
}
.problem{
  input{
    width: 9rem;
    height: 2.5rem;
    border: .01rem solid #d7d7d7;
  }

}
.deal{
  .chose{
    width: .4rem;
    height: .4rem;
  }
  .common3{
    padding: .2rem 0;
    font-size: .4rem;
    color: #000;
  }
  .dealAdvice{
    border-top: .2rem solid #F5F5F5;
    input{
      width: 9rem;
      height: 2.5rem;
      border: .01rem solid #d7d7d7;
      color: #000;
    }
    .textTum{
      margin: .1rem .1rem 0 0;
      text-align: right;
    }
  }
}
.add{
  padding: .6rem 0 .6rem .4rem;
  border-top: .01rem solid #F2F2F2;
  border-bottom: .01rem solid #F2F2F2;
  background-color: #fff;
  img{
    width: 1.2rem;
    height: 1.2rem;
  }
}
.common{
  padding: .1rem 0;
  font-size: .4rem;
  color: #000;
}
.problem{
  padding:0 0 .2rem 0;
  border-bottom: .01rem solid #bababa;
  p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  ;
  }
}

</style>